import {
  getBanners,
  getSongMenu
} from '../../service/api_music';

import {
  playerStore,
  rangkingStore,
  rankingMap
} from '../../store/index';

import querySelectorRect from '../../utils/querySelectorRect';
import throttle from '../../utils/throttle';
const throttleQureyRect = throttle(querySelectorRect, 500,{trailing:true});
Page({
  /**
   * 页面的初始数据
   */
  data: {
    swiperHeight: 0,
    banners: [],
    recommendSongs: [],
    hotSongsMenu: [],
    recommendSongMenu: [],
    rangkings: {
      0: {},
      2: {},
      3: {}
    },
    currentSong:{}, //当前播放歌曲信息
    isPlaying:false,

    playListSongs:[], //歌曲列表
    show: false, // 歌曲列表展示
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    getBanners().then(res => {
      this.setData({
        banners: res.banners,
      });
    });
    // 获取推荐歌曲数据
    rangkingStore.dispatch('getRankingDataAcion');
    // 排行榜监听
    rangkingStore.onState('hotRanking', res => {
      if (!res.tracks) return;
      const recommendSongs = res?.tracks?.slice(0, 6);
      this.setData({
        recommendSongs,
      });
    });
    rangkingStore.onState('newRanking', this.getRankingHandler(0));
    rangkingStore.onState('originRanking', this.getRankingHandler(2));
    rangkingStore.onState('upRanking', this.getRankingHandler(3)); 
    //歌曲信息监听
    playerStore.onStates(['currentSong','isPlaying','playListSongs'],({currentSong,isPlaying,playListSongs})=>{
      if(currentSong) this.setData({currentSong})
      if(playListSongs) this.setData({playListSongs})
      if(isPlaying !== undefined) this.setData({isPlaying})
    })
    getSongMenu().then(res => {
      this.setData({
        hotSongsMenu: res.playlists,
      });
    });
    getSongMenu('华语').then(res => {
      this.setData({
        recommendSongMenu: res.playlists,
      });
    });
  },
  // 事件处理
  handleSearchClick() {
    wx.navigateTo({
      url: '/pages/detail-search/index',
    });
  },
  // 图片加载完成
  handleSwipperImageLoaded() {
    throttleQureyRect('.swipper-image').then(res => {
      this.setData({
        swiperHeight: res,
      });
    });
  },

  getRankingHandler(idx) {
    return res => {
      if (!res.tracks) return;
      const name = res?.name;
      const coverImage = res?.coverImgUrl;
      const playCount = res.playCount;
      const songList = res?.tracks?.slice(0, 3);
      const rangObj = {
        name,
        coverImage,
        songList,
        playCount,
      };
      const originRangkings = {
        ...this.data.rangkings,
        [idx]: rangObj
      };
      this.setData({
        rangkings: originRangkings,
      });
    };
  },
  // 推荐歌曲点击更多
  handleMoreClick(){
    this.navigateToDetailSongsPage('hotRanking');
  },
  // 点击排行榜
  handleRankingItemClick: function (event) {
    const idx = event.currentTarget.dataset.idx;
    const rankingName = rankingMap[idx];
    this.navigateToDetailSongsPage(rankingName);
  },

  navigateToDetailSongsPage: function(rankingName) {
    wx.navigateTo({
      url: `/pages/detail-songs/index?ranking=${rankingName}&type=rank`,
    })
  },

  // 点击列表单曲
  handleSongItemClick(event){
    const index = event.currentTarget.dataset.index
    playerStore.setState('playListSongs',this.data.recommendSongs) //歌曲列表
    playerStore.setState('playListIndex',index) //当前歌曲索引
  },
  // 播放/暂停音乐
  handlePlayBtnClick(event){
    playerStore.dispatch('changeMusicPlayStatusAction',!this.data.isPlaying)
    // 阻止事件冒泡
    // event.stopPropagation() 小程序不支持 事件监听采用：catchtap
  },
  // 跳转音乐页面
  handlePlayBarCliick(){
    wx.navigateTo({
      url: `/packagePlayer/pages/music-player/index?id=${this.data.currentSong.id}`,
    })
  },

  // 展示歌曲列表
  onClose() {
    this.setData({ show: false });
  },
  onShowListSongs() {
    this.setData({ show: true });
    }
});